<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/vue.min.js"></script>
<style type="text/css">
.red{color:red;}
.orange{color:orange;}
.yellow{color:yellow;}
</style>
</head>
<body>
<div id="myApp">
	<h3>全局自定义指令</h3>
	<p>自定义一个 v-focus的指令，让页面加载的时候input被选中</p>
	<input type="text" v-focus>
<hr>
	<h3>局部自定义指令</h3>
	<input type="text" v-focus>
</div>
<script type="text/javascript">
// 注册一个全局自定义指令 v-focus
Vue.directive('focus',{
	// 当绑定元素插入到 DOM 中。
	inserted: function (el) {
		// 聚焦元素
		el.focus()
	}
})
var myApp = new Vue({
	el:"#myApp",	
	data:{ 
		message:'hello world!'
	},
	directives:{
		 // 注册一个局部的自定义指令 v-focus
	    focus: {
	      // 指令的定义
	      inserted: function (el) {
	        // 聚焦元素
	        el.focus()
	      }
	    }
	}
});
</script>
</body>
</html>